<template>
	<view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
			:duration="duration" :circular="circular">
			<swiper-item>
				<image class="img" src="../../static/images/fq/banner.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="img" src="../../static/images/fq/kda1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="img" src="../../static/images/fq/a.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="category-container">
			<scroll-view class="left-menu" scroll-y="true">

				<view class="menu-item" v-for="item in goodsData" :key="item.id">{{item.name}}</view>

			</scroll-view>

			<scroll-view class="right-menu-detail" scroll-y="true" :scroll-top='scrollTop'>
				<view v-for="item in goodsData" :key="item.id">
					<view class="detail-title">
						<!-- 标题 -->
						<text class='tex'>{{item.name}}</text>
						<!-- 商品 -->
						<view class="nr">
							<view class="nr1" v-for="it in item.children" :key="it.id">
								<navigator :url="`/pages/profq/profq?id=${it.id}`">
									<image class="img1" :src='it.goodstypeImg' mode="aspectFill"></image>
									<text>{{it.name}}</text>
								</navigator>
							</view>

						</view>
					</view>
				</view>
			</scroll-view>


		</view>
	</view>

</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapMutations,
		mapState
	} = createNamespacedHelpers("goods");
	export default {

		onLoad() {
			this.getShop()
		},

	data() {
        return {
                scrollTop: 440,
                   indicatorDots: false,
                   autoplay: true,
                   interval: 2000,
                   duration: 500,
				   circular:true
               }
    },
    methods: {
		...mapActions(['getshop']),
		
	getShop(){
		this.getshop()
		
	},
	goTop(a){
		console.log('33',a)
	}
    },
	computed:{
		...mapState(['goodsData'])
	}

	}
</script>

<style>
	.t {
		width: 600rpx;
		height: 45rpx;
		border: 1rpx solid #C8C7CC;
		margin: 0 auto;
		display: flex;
		border-radius: 20rpx;
	}

	.fd1 {
		width: 45rpx;
		height: 40rpx;
		margin-top: 5rpx;
		margin-left: 5rpx;
		/* border:1rpx solid #007AFF */
	}

	.fd {
		width: 100%;
		height: 100%;
	}

	.ss {
		width: 530rpx;
		height: 45rpx;
		/* border:1px solid #007AFF; */

		margin: 0 auto;
	}

	
	.swiper {
		width: 642rpx;
		height: 220rpx;
		margin: 20rpx auto;
	}

	.img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.img1 {
		width: 100%;
		height: 150rpx;
	}

	.category-container {
		display: flex;
	}

	.left-menu {
		width: 190rpx;
		font-size: 30rpx;
		text-align: center;
		flex-shrink: 0;
		height: 100vh;

	}

	.menu-item {
		line-height: 100rpx;
		border-left: 10rpx solid transparent;
	}

	.right-menu-detail {
		width: 560rpx;
		background-color: #fff;
		height: 100vh;
	}

	.detail-title {
		/* height:100rpx; */
		color: #666;
		margin: 20rpx auto;
		align-items: center;
		font-size: 28rpx;
	}

	.menu-item {
		line-height: 100rpx;
		border-left: 10rpx solid transparent
	}

	.src {
		width: 150rpx;
		height: 150rpx;
		border: 1px solid #007AFF
	}

	.tx {
		text-align: center;
	}

	.nr {
		width: 550rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.nr1 {
		width: 30%;
		height: 38%;
		margin-top: 20rpx;
		/* border:1rpx solid #2C405A; */
		margin-left: 12rpx;
		text-align: center;
	}

	.tex {
		display: block;
		font-size: 30rpx;
		color: #333333;
		font-weight: 800;
		margin-left: 20rpx;
		margin-top: 30rpx
	}
</style>
